<!-- 绩效-基础设置-关键业绩指标库 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        来源
        <a-select
          style="width: 200px"
          v-model="params.source"
          @change="refresh"
        >
          <a-option
            v-for="item in arr"
            :value="item.id"
            :label="item.label"
            :key="item.id"
          ></a-option>
        </a-select>
        名称
        <a-input-search
          :style="{ width: '220px' }"
          placeholder="名称"
          v-model="params.name"
          search-button
          @search="refresh"
          @press-enter="refresh"
        />
      </template>
      <template #right>
        <a-button type="primary" @click="add">新增指标</a-button>
      </template>
    </ConditionBox>
    <!-- <a-divider /> -->
    <table-turn :table-data="getTableData" ref="tableRef">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="name" title="指标名称">
      </a-table-column>
      <a-table-column
        :width="200"
        data-index="indexDefinition"
        title="指标定义"
      >
      </a-table-column>
      <a-table-column
        :width="200"
        data-index="projectDefinition"
        title="项目界定"
      >
      </a-table-column>
      <a-table-column :width="200" data-index="polarity" title="指标极性">
        <template #cell="{ record }">
          {{
            record.polarity
              ? record.polarity === 1
                ? '越大越好'
                : '越小越好'
              : '--'
          }}
        </template>
      </a-table-column>
      <a-table-column
        :width="200"
        data-index="instructions"
        title="指标公式/说明"
      >
      </a-table-column>
      <a-table-column :width="300" data-index="rule" title="评分标准/规则">
      </a-table-column>
      <a-table-column
        :width="200"
        data-index="targetValue"
        title="考核目标"
        :header-cell-style="{
          height: '30px'
        }"
      >
        <a-table-column
          :width="150"
          data-index="referenceValue"
          title="考核基准值"
          :header-cell-style="{
            height: '30px'
          }"
        >
        </a-table-column>
        <a-table-column
          :width="150"
          data-index="targetValue"
          title="考核目标值"
          :header-cell-style="{
            height: '30px'
          }"
        >
        </a-table-column>
        <a-table-column
          :width="150"
          data-index="challengePoint"
          title="考核挑战值"
          :header-cell-style="{
            height: '30px'
          }"
        >
        </a-table-column>
      </a-table-column>
      <a-table-column
        :width="90"
        data-index="status"
        title="启用状态"
        align="center"
      >
        <template #cell="{ record }">
          <a-switch
            v-model="record.status"
            :checked-value="1"
            :unchecked-value="2"
            @change="stateChange(record)"
          ></a-switch>
        </template>
      </a-table-column>
      <a-table-column
        :width="120"
        data-index=""
        title="操作"
        fixed="right"
        align="center"
      >
        <template #cell="{ record }">
          <a-tooltip content="编辑">
            <IconFont
              type="icon-edit"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer'
              }"
              @click="goEdit(record)"
            />
          </a-tooltip>
          <a-tooltip content="删除" position="left">
            <a-popconfirm content="是否确认删除该条数据?" @ok="del(record.id)">
              <icon-font
                type="icon-delete"
                :size="26"
                :style="{
                  cursor: 'pointer',
                  marginRight: '10px'
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </template>
      </a-table-column>
    </table-turn>
  </ContentCard>
  <AddIndex
    v-model:visible="modalVisible"
    @kpiIndexEmit="kpiIndexEmit"
    :data="currData"
  ></AddIndex>
</template>

<script lang="ts" setup>
import {
  GetKpiIndexList,
  PostKpiIndex,
  PutKpiIndex,
  DelKpiIndex
} from '@/apis/management/performance/baseSetting/template';
import { KpiIndex } from '@/apis/management/performance/baseSetting/template/type';
import { Message } from '@arco-design/web-vue';
import AddIndex from './Components/AddIndex/index.vue';
const router = useRouter();
const title = '关键业绩指标库';

const breadCrumb: string[] = ['人事', '基础设置', '指标库', '关键业绩指标库'];

const arr = Object.freeze([
  {
    id: 0,
    label: '全部'
  },
  {
    id: 1,
    label: '财务类'
  },
  {
    id: 2,
    label: '客户类'
  },
  {
    id: 3,
    label: '内部运营类'
  },
  {
    id: 4,
    label: '学习与成长类'
  }
]);
const params = reactive({ source: 0, name: '' });

// 左侧item点击事件
const itemClick = (id: number) => {
  if (params.source !== id) {
    params.source = id;
    refresh();
  }
};

let modalVisible = ref(false); // 判断新增弹出框是否打开

// 新增异动事件
const add = () => {
  currData.value = {
    source: 1, // 指标来源
    type: 1, // 指标类型
    name: '', // 指标名称
    indexDefinition: '', // 指标定义
    projectDefinition: '', // 项目界定
    polarity: undefined, // 指标极性
    instructions: '', // 指标公式/说明
    rule: '', // 评分标准/规则
    scoringMethod: 1, // 评分方式 1 直接输入 2 公式计算
    status: 1,
    isUseReferenceValue: 0,
    isUserChallengePoint: 0,
    challengePoint: undefined
  };
  modalVisible.value = true;
};

const tableRef = ref(); // 表格的ref

let originData: any = ref([]); // 储存异动类型
let currData = ref<KpiIndex>(); // 储存当前选中数据
// 获取表格数据
const getTableData = async (pagination: any) => {
  try {
    const res = await GetKpiIndexList({ ...params, ...pagination });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

let isCollapsed = ref(false); // 判断是否收起
const collapse = (collapsed: boolean) => {
  isCollapsed.value = collapsed;
};

const goEdit = (record: any) => {
  console.log(record);
  currData.value = record;
  modalVisible.value = true;
};

// 删除某一行
const del = async (id: number) => {
  try {
    await DelKpiIndex({ ids: [id] });
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 修改状态
const stateChange = async (data: KpiIndex) => {
  try {
    await PutKpiIndex(data);
    Message.success('修改成功');
  } catch (error: unknown) {
    console.log(error);
  }
};

// 新增弹出框返回的
const kpiIndexEmit = async (formData: any) => {
  try {
    // 编辑
    if (formData.id) {
      await PutKpiIndex(formData);
    }
    // 新增
    else await PostKpiIndex(formData);
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

const refresh = () => {
  tableRef.value.loadData();
};
</script>

<style scoped lang="less"></style>
